Vue Router 和组合式 API

2024-03-29 17:39| 来源: 网络整理| 查看: 265

Vue Router 和组合式 API 在 Vue School 上观看免费视频课程

引入 setup 和 Vue 的组合式 API，开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。

在 setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数：

jsimport { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, ...query, }, }) } }, }

route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。

jsimport { useRoute } from 'vue-router' import { ref, watch } from 'vue' export default { setup() { const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } ) }, }

请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

导航守卫

虽然你仍然可以通过 setup 函数来使用组件内的导航守卫，但 Vue Router 将更新和离开守卫作为组合式 API 函数公开：

jsimport { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' import { ref } from 'vue' export default { setup() { // 与 beforeRouteLeave 相同，无法访问 `this` onBeforeRouteLeave((to, from) => { const answer = window.confirm( 'Do you really want to leave? you have unsaved changes!' ) // 取消导航并停留在同一页面上 if (!answer) return false }) const userData = ref() // 与 beforeRouteUpdate 相同，无法访问 `this` onBeforeRouteUpdate(async (to, from) => { //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改 if (to.params.id !== from.params.id) { userData.value = await fetchUser(to.params.id) } }) }, }

组合式 API 守卫也可以用在任何由渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

useLink

Vue Router 将 RouterLink 的内部行为作为一个组合式函数 (composable) 公开。它接收一个类似 RouterLink 所有 prop 的响应式对象，并暴露底层属性来构建你自己的 RouterLink 组件或生成自定义链接：

jsimport { RouterLink, useLink } from 'vue-router' import { computed } from 'vue' export default { name: 'AppLink', props: { // 如果使用 TypeScript，请添加 @ts-ignore ...RouterLink.props, inactiveClass: String, }, setup(props) { const { // 解析出来的路由对象 route, // 用在链接里的 href href, // 布尔类型的 ref 标识链接是否匹配当前路由 isActive, // 布尔类型的 ref 标识链接是否严格匹配当前路由 isExactActive, // 导航至该链接的函数 navigate } = useLink(props) const isExternalLink = computed( () => typeof props.to === 'string' && props.to.startsWith('http') ) return { isExternalLink, href, navigate, isActive } }, }

注意在 RouterLink 的 v-slot 中可以访问与 useLink 组合式函数相同的属性。

【本文地址】

公司简介

联系我们

Vue Router 和 组合式 API

Vue Router 和组合式 API